<template>
  <a-modal
    title="导入数据"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="merchantLevelManagerImportVisiable">

    <div style="width: 100%">
      <div class="option-area">
        <a-upload
          class="upload-area"
          :fileList="fileList"
          :remove="handleRemove"
          :disabled="fileList.length === 1"
          :beforeUpload="beforeUpload">
          <a-button>
            <a-icon type="upload"/>
            选择.xlsx文件
          </a-button>
        </a-upload>
        <div class="button-area">
          <a-button type="primary" @click="downloadTemplate" style="margin-right: .5rem">
            模板下载
          </a-button>
          <a-button
            @click="handleUpload"
            :disabled="fileList.length === 0"
            :loading="uploading"
            v-has-permission="['merchantLevelManager:import']">
            {{uploading ? '导入中' : '导入Excel' }}
          </a-button>
          <a-badge
            status="warning"
            text="无权限"
            v-has-no-permission="['merchantLevelManager:import']"/>
        </div>
      </div>
    </div>

  </a-modal>
</template>

<script>

    import ImportResult from "../../../../others/ImportResult";

    export default {

      components: {ImportResult},

      name: "MerchantLevelManagerImport",

      data() {
        return {
          fileList: [],
          importData: [],
          times: '',
          errors: [],
          uploading: false,
          importResultVisible: false,
          loading: false
        }
      },

      props: {
        merchantLevelManagerImportVisiable: {
          default: false
        },
        brandInstId: '',
      },

      computed: {
        show: {
          get: function () {
            return this.merchantLevelManagerImportVisiable
          },
          set: function () {
          }
        },
      },

      methods: {
        onClose() {
          // this.reset()
          this.fileList = []
          this.$emit('close')
        },

        handleClose() {
          this.importResultVisible = false
        },
        downloadTemplate() {
          this.$download('/admin/quota/merchantLevelManager/getExcel', {}, '商户级限额管理导入模板.xlsx');
        },

        handleRemove(file) {
          if (this.uploading) {
            this.$message.warning('文件导入中，请勿删除')
            return
          }
          const index = this.fileList.indexOf(file)
          const newFileList = this.fileList.slice()
          newFileList.splice(index, 1)
          this.fileList = newFileList
        },
        beforeUpload(file) {
          this.fileList = [...this.fileList, file]
          return false
        },
        handleUpload() {
          const {fileList} = this
          let formData = new FormData()
          formData.append('file', fileList[0])
          formData.append('instId',this.$attrs.instId)
          this.uploading = true
          debugger
          this.$upload('/admin/quota/merchantLevelManager/upload', formData).then((r) => {
            let data = r.data
            this.uploading = false
            this.fileList = []
            if (data.code=="100000"){
              this.$message.success(data.data)
            }else {
              this.$message.error(data.message)
            }
          })
        }}}
</script>


<style lang="less" scoped>
@import "../../../../../../static/less/Common";

.option-area {
  display: inline-block;
  width: 100%;
  padding: 0 .9rem;
  margin: .5rem 0;

  .upload-area {
    display: inline;
    float: left;
    width: 50%
  }

  .button-area {
    margin-left: 1rem;
    display: inline;
    float: right;
    width: 30%;
  }
}
</style>
